<template>
  <Modal v-model="modal" title="批量标语">
    <div class="tag-modal">
        <Form :model="form" :label-width="80" ref="form" :rules="rules">
            <FormItem label="标语内容" prop="subTitle">
                <Input :maxlength="45" v-model.trim="form.subTitle" placeholder="请输入标语内容，1-45个字之间..."/>
            </FormItem>
            <FormItem label="标语文字" prop="subTitleHint">
                <Input :maxlength="10" v-model.trim="form.subTitleHint" placeholder="请输入标语文字，1-10个字之间..."/>
            </FormItem>
            <FormItem label="标语地址" prop="subTitleLink">
                <Input v-model.trim="form.subTitleLink" placeholder="商品标语地址..."/>
            </FormItem>
        </Form>
    </div>
    <div slot="footer">
        <Button @click="modal = false" size="large">取消</Button>
        <Button @click="onSave" :disabled="btnDisable" type="primary" size="large">确定</Button>
    </div>
</Modal>
</template>
<script>
export default {
  props:{
    productIds: Array
  },
  data() {
    const validateTitle = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('请输入标语内容'));
      } else {
        if (value.length < 1) {
          callback(new Error('标语内容在1-45个字之间'));
        }
        callback();
      }
    };
    const validateHint = (rule, value, callback) => {
      if (value !== '' && value != null) {
        if (value.length < 1) {
          callback(new Error('标语文字在1-10个字之间'));
        }
        callback();
      } else {
        callback();
      }
    };
    const validateLink = (rule, value, callback) => {
      if (value !== '' && value != null){
        let reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
        if (!reg.test(value)) {
          callback(new Error("请输入正确的网址"));
        }
        callback();
      } else {
        callback();
      }
    };
    return {
      modal: false,
      btnDisable: false,
      rules: {
        subTitle: [{ required: true, validator: validateTitle, trigger: "blur" }],
        subTitleHint: [{validator: validateHint, trigger: "blur" }],
        subTitleLink: [{validator: validateLink, trigger: "blur" }],
      },
      form: {
        subTitle: "",
        subTitleHint: '',
        subTitleLink: ''
      },
    };
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields();
      this.form = {
        subTitle: "",
        subTitleHint: '',
        subTitleLink: ''
      };
      this.btnDisable = false;
      this.openModal();
    },
    openModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
    onSave() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.subTitleHint != '' && this.form.subTitleLink == '') {
            this.$Message.error('请输入链接文字的地址');
            return;
          }
          if (this.form.subTitleHint == '' && this.form.subTitleLink != '') {
            this.$Message.error('请输入链接文字');
            return;
          }
          this.btnDisable = true;
          let param = {
            productIds: this.productIds,
            subTitle: this.form.subTitle,
            subTitleHint: this.form.subTitleHint,
            subTitleLink: this.form.subTitleLink
          }
          this.$ajaxPost('/product/business/batch_update/sub_title', param).then(data =>{
            this.$Notice.success({
              title: '设置成功'
            })
            this.$emit('update')
            this.closeModal()
          }).catch(() =>{
            this.btnDisable = false
          })
        }
      });
    }
  }
}
</script>

